<template>
  <div>
    <!-- 系统设置 -->
    <div class="model">
      <!-- <div class="advanter">
        <div class="img">
          <img :src="src" alt="头像" />
        </div>
        <h1 @click="changeAdvan">
          <span @click="changeAdvan">修改头像</span>
        </h1>
      </div> -->
      <div class="name">
        <el-form :model="form" label-width="120px" :rules="rules">
          <el-form-item label="用户名" prop="userName">
            <el-input
              v-model="form.userName"
              placeholder="请输入更改用户名"
            ></el-input>
          </el-form-item>
          <el-form-item label="原密码" prop="oldPassWord">
            <el-input
              placeholder="请输入原密码"
              v-model="form.oldPassWord"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input
              placeholder="请输入新密码"
              v-model="form.newPassword"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="重新输入密码" prop="newPassword2">
            <el-input
              placeholder="请重新输入密码"
              v-model="form.newPassword2"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="subbtn" @click="submit"
              >确认修改</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    const checkPassWord = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请填写新密码"));
      }
      if (value !== this.form.newPassword) {
        return callback(new Error("两次密码不正确"));
      }
      return callback();
    };
    return {
      src: "",
      form: {
        oldPassWord: "",
        newPassword: "",
        newPassword2: "",
        userName: ""
      },
      rules: {
        oldPassWord: [
          { required: true, message: "请填写原密码", trigger: "blur" }
        ],
        newPassword: [
          { required: true, message: "请填写新密码", trigger: "blur" }
        ],
        newPassword2: [
          { required: true, validator: checkPassWord, trigger: "blur" }
        ],
        userName: [
          { required: true, message: "请输入更改用户名", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    getData() {
      this.form.userName = JSON.parse(
        JSON.stringify(this.$store.state.userInfo)
      ).nc;
      console.log("this.$store.state.userInfo", this.$store.state.userInfo);
    },
    editUsername() {},
    changeAdvan() {},
    submit() {
      const formData = new FormData();
      formData.set("pop", this.$store.state.userInfo.zh_id);
      formData.set("zh", this.$store.state.userInfo.zh);
      formData.set("mm", this.form.newPassword);
      formData.set("nc", this.form.userName);
      formData.set("dl", "1");
      formData.set("cjr", this.$store.state.userInfo.zh_id);
      this.$http
        .post(this.$baseUrl.adminManage, formData)
        .then(res => {
          console.log(res);
          if (res.data[0].pop == "0") {
            this.$message({
              type: "success",
              message: res.data[0].log,
              onClose: () => {
                this.$store.commit("logOut");
              }
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style scoped lang="scss">
.subbtn {
  margin-top: 120px;
  margin-left: 40%;
}
.model {
  padding-top: 30px;
  margin-top: 80px;
  .advanter {
    margin-bottom: 15px;
    h1 {
      text-align: center;
      span {
        &:hover {
          color: $base-color;
        }
        cursor: pointer;
      }
    }
    .img {
      width: 500px;
      height: 500px;
      border-radius: 50%;
      box-shadow: 0 0 5px #333;
      overflow: hidden;
      margin: 0 auto;
      margin-bottom: 30px;
      display: block;
      cursor: pointer;
      img {
        width: inherit;
        height: inherit;
      }
    }
  }
}
</style>
